<template>
  <Row v-if="showRight">
    <Col span="24">
      <div class="floating-panel">
        <Card
          :class="windowSizeClass"
        >
          <p slot="title" v-if="!windowMinimized">数据列表</p>
          <a
            href="#"
            slot="extra"
            @click.prevent="minimizeTableWindow"
            v-if="!windowMinimized"
          >
            <Icon type="ios-arrow-back" slot="extra" />
          </a>
          <a
            href="#"
            slot="extra"
            @click.prevent="maximizeTableWindow"
            v-if="windowMinimized"
          >
            <Icon type="ios-arrow-forward" slot="extra" />
          </a>
          <Table
            :columns="tableColumns"
            :row-class-name="rowClassNameCalculate"
            :data="internalTableData"
            border
            max-height="150"
          ></Table>
          <!-- 给 data 项设置特殊 key _highlight: true 可以默认选中当前项。 -->
        </Card>
      </div>
    </Col>
  </Row>
</template>

<script>
import { busEventEmit, busEventHandle } from "@/teleport/bus";
import { readExcel } from "@/libs/importExcel";

export default {
  name: "",
  data() {
    return {
      showRight: true,
      excelUploaded: false,
      tableColumns: [],
      internalTableData: [],
      excelJson: null,
      currentIndex: 0,
      windowMinimized: false,
      windowSizeClass: null,
    };
  },
  watch: {
    tableData: {
      handler(n) {
        this.$nextTick().then(()=>{
          this.renderTable();
        })
      },
      immediate: true,
      deep: true,
    },
    currentRowIndex:{
      handler(n,o){
        if(n!==o){
          this.currentIndex = n;
        }
      },
      immediate:true
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => new Array(),
    },
    currentRowIndex:{
      type:Number,
      default:0
    }
  },
  mounted() {},
  methods: {
    rowClassNameCalculate(row, index) {
      if (index === this.currentIndex) {
        return "current-row";
      } else if (index < this.currentIndex) {
        return "past-row";
      }
      return "";
    },
    renderTable() {
      let keys = Object.keys(this.tableData[0]);
      this.tableColumns = keys.map((o) => {
        return {
          title: o,
          key: o,
        };
      });
      this.internalTableData = this.tableData;
    },
    minimizeTableWindow() {
      this.windowSizeClass = "window-min";
      this.windowMinimized = true;
    },
    maximizeTableWindow() {
      this.windowSizeClass = "window-max";
      this.windowMinimized = false;
    },
  },
  created() {

  },
};
</script>

<style scoped>
.floating-panel {
  position: fixed;
  right: 420px;
  left:72px;
  top: 72px;
  z-index: 0;
}
.window-min {
  width: 48px;
  height: 48px;
  overflow: hidden;
}
.window-max {
  width: 100%;
  height: auto;
  overflow: auto;
}
</style>